<template>
  <div class="property-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <div class="header-content">
        <div class="element-info">
          <div class="element-icon">
            <el-icon :size="18">
              <component :is="getElementIcon()" />
            </el-icon>
          </div>
          <div class="element-details">
            <div class="element-title">{{ getElementTitle() }}</div>
            <div class="element-subtitle">{{ getElementSubtitle() }}</div>
          </div>
        </div>
        <el-button 
          v-if="selectedElement" 
          type="text" 
          size="small" 
          @click="copyElementId">
          <el-icon><DocumentCopy /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 面板内容区 -->
    <div class="panel-content">
      <!-- 基础信息区域 -->
      <div class="property-section">
        <div class="section-header">
          <span class="section-title">基础属性</span>
        </div>
        <div class="section-content">
          <template v-if="isProcess">
            <div class="property-group">
              <div class="property-row">
                <div class="property-label">
                  流程ID
                  <span class="required-field">*</span>
                </div>
                <div class="property-input">
                  <el-input
                    v-model="processId"
                    placeholder="请输入流程ID"
                    size="small"
                    @change="updateProperty('id', $event)">
                    <template #suffix>
                      <el-tooltip content="流程的唯一标识符(必填)" placement="top">
                        <el-icon class="input-help"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
            <div class="property-group">
              <div class="property-row">
                <div class="property-label">
                  流程名称
                  <span class="required-field">*</span>
                </div>
                <div class="property-input">
                  <el-input
                    v-model="processName"
                    placeholder="请输入流程名称"
                    size="small"
                    @change="updateProperty('name', $event)" />
                </div>
              </div>
            </div>
            <!-- 流程扩展属性 -->
            <div class="property-group feature-highlight process-ext-feature">
              <div class="property-row">
                <div class="property-label">
                  <el-icon class="feature-icon"><Connection /></el-icon>
                  接口配置
                  <el-tooltip content="配置与外部系统集成相关的回调地址" placement="top">
                    <el-icon class="help-icon"><InfoFilled /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <!-- 用户回调地址 -->
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">外部用户回调地址</div>
                <div class="property-input">
                  <el-input
                    v-model="userCallbackAddress"
                    placeholder="请输入获取外部用户的回调地址"
                    size="small"
                    @change="updateFlowableProperty('userCallbackAddress', $event)">
                    <template #suffix>
                      <el-tooltip content="用于获取外部系统用户信息的回调地址" placement="top">
                        <el-icon class="input-help"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </template>
                  </el-input>
                </div>
              </div>
              <!-- 办理回调地址 -->
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">办理回调地址</div>
                <div class="property-input">
                  <el-input
                    v-model="handleCallbackAddress"
                    placeholder="请输入办理结果回调地址"
                    size="small"
                    @change="updateFlowableProperty('handleCallbackAddress', $event)">
                    <template #suffix>
                      <el-tooltip content="用于接收外部系统办理结果的回调地址" placement="top">
                        <el-icon class="input-help"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="property-group">
              <div class="property-row">
                <div class="property-label">
                  节点ID
                  <span class="required-field">*</span>
                </div>
                <div class="property-input">
                  <el-input
                    v-model="elementId"
                    placeholder="请输入节点ID"
                    size="small"
                    @change="updateProperty('id', $event)">
                    <template #suffix>
                      <el-tooltip content="节点的唯一标识符(必填)" placement="top">
                        <el-icon class="input-help"><QuestionFilled /></el-icon>
                      </el-tooltip>
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
            <div class="property-group">
              <div class="property-row">
                <div class="property-label">
                  节点名称
                  <span class="required-field">*</span>
                </div>
                <div class="property-input">
                  <el-input
                    v-model="elementName"
                    placeholder="请输入节点名称"
                    size="small"
                    @change="updateProperty('name', $event)" />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>



      <!-- User task configuration -->
      <div v-if="isUserTask" class="property-section">
        <div class="section-header">
          <span class="section-title">任务配置</span>
          <el-tooltip content="配置用户任务的审批设置" placement="top">
            <el-icon class="section-help"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="section-content">
          <!-- 人员配置统一卡片 -->
          <div class="property-group feature-highlight assignee-feature">
            <!-- 审批模式选择 -->
            <div class="property-row">
              <div class="property-label">审批模式</div>
              <div class="property-input">
                <el-radio-group 
                  v-model="approvalMode" 
                  size="small"
                  @change="handleApprovalModeChange">
                  <el-radio-button value="assignee">指定人员</el-radio-button>
                  <el-radio-button value="candidate">候选人员</el-radio-button>
                  <el-radio-button value="external">外部用户</el-radio-button>
                </el-radio-group>
              </div>
            </div>

            <!-- 指定人员模式 -->
            <template v-if="approvalMode === 'assignee'">
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">审批人</div>
                <div class="property-input">
                  <el-select
                    v-model="assignee"
                    placeholder="请选择或输入审批人"
                    size="small"
                    filterable
                    allow-create
                    @change="handleAssigneeChange">
                    <el-option-group label="常用人员">
                      <el-option label="当前用户" value="${currentUser}">
                        <div class="option-content">
                          <span>当前用户</span>
                          <small>${currentUser}</small>
                        </div>
                      </el-option>
                      <el-option label="流程发起人" value="${initiator}">
                        <div class="option-content">
                          <span>流程发起人</span>
                          <small>${initiator}</small>
                        </div>
                      </el-option>
                    </el-option-group>
                    <el-option-group label="动态分配">
                      <el-option label="部门负责人" value="${deptManager}">
                        <div class="option-content">
                          <span>部门负责人</span>
                          <small>${deptManager}</small>
                        </div>
                      </el-option>
                      <el-option label="上级负责人" value="${supervisor}">
                        <div class="option-content">
                          <span>上级负责人</span>
                          <small>${supervisor}</small>
                        </div>
                      </el-option>
                    </el-option-group>
                    <!-- 使用传入的选项数据或默认选项 -->
                    <el-option-group v-if="props.assigneeOptions && props.assigneeOptions.length > 0" label="其他人员">
                      <el-option
                        v-for="option in props.assigneeOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value" >
                        <div class="option-content">
                          <span>{{option.label}}</span>
                          <small>{{option.value}}</small>
                        </div>
                      </el-option>
                    </el-option-group>
                  </el-select>
                </div>
              </div>
            </template>

            <!-- 候选人员模式 -->
            <template v-else-if="approvalMode === 'candidate'">
              <!-- 候选用户 -->
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">候选用户</div>
                <div class="property-input">
                  <el-select
                    v-model="candidateUsers"
                    placeholder="请选择候选用户"
                    size="small"
                    multiple
                    filterable
                    allow-create
                    @change="handleCandidateUsersChange">
                    <!-- 使用传入的选项数据或默认选项 -->
                    <template v-if="props.candidateUserOptions && props.candidateUserOptions.length > 0">
                      <el-option
                        v-for="option in props.candidateUserOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value" />
                    </template>
                    <template v-else>
                      <el-option label="user1" value="user1" />
                      <el-option label="user2" value="user2" />
                      <el-option label="user3" value="user3" />
                    </template>
                  </el-select>
                </div>
              </div>
              
              <!-- 候选组 -->
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">候选组</div>
                <div class="property-input">
                  <el-select
                    v-model="candidateGroups"
                    placeholder="请选择候选组"
                    size="small"
                    multiple
                    filterable
                    allow-create
                    @change="handleCandidateGroupsChange">
                    <!-- 使用传入的选项数据或默认选项 -->
                    <template v-if="props.candidateGroupOptions && props.candidateGroupOptions.length > 0">
                      <el-option
                        v-for="option in props.candidateGroupOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value" />
                    </template>
                    <template v-else>
                      <el-option label="管理员组" value="admin" />
                      <el-option label="财务组" value="finance" />
                      <el-option label="人事组" value="hr" />
                    </template>
                  </el-select>
                </div>
              </div>
            </template>

            <!-- 外部接口用户模式 -->
            <template v-else-if="approvalMode === 'external'">
              <!-- 外部接口用户模式配置区域 -->
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">外部系统处理</div>
                <div class="property-input">
                  <div class="external-mode-tip">
                    <el-icon class="tip-icon"><InfoFilled /></el-icon>
                    <span>任务将由外部系统通过接口处理</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
          
          <!-- 会签设置 -->
          <div class="property-group feature-highlight collaboration-feature">
            <div class="property-row">
              <div class="property-label">
                <el-icon class="feature-icon"><User /></el-icon>
                会签模式
                <el-tooltip content="开启后可设置多人协同处理同一任务" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="property-input">
                <el-switch
                  v-model="isMultiInstance"
                  size="small"
                  @change="(value: string | number | boolean) => toggleMultiInstance(value as boolean)"
                  active-text="开启"
                  inactive-text="关闭" />
              </div>
            </div>
          
            <!-- 会签配置详细设置 -->
            <template v-if="isMultiInstance">
              <div class="feature-expanded-content">
                <!-- 预设模式选择 -->
                <div class="property-group">
                  <div class="property-row">
                    <div class="property-label">快速配置</div>
                    <div class="property-input">
                      <div class="preset-modes">
                        <div 
                          class="preset-mode"
                          :class="{ active: getCurrentPresetMode() === 'allApproval' }"
                          @click="applyPresetMode('allApproval')">
                          <el-icon><User /></el-icon>
                          <span>全员通过</span>
                          <small>所有人都需要通过</small>
                        </div>
                        <div 
                          class="preset-mode"
                          :class="{ active: getCurrentPresetMode() === 'majorityApproval' }"
                          @click="applyPresetMode('majorityApproval')">
                          <el-icon><User /></el-icon>
                          <span>过半通过</span>
                          <small>超过50%通过即可</small>
                        </div>
                        <div 
                          class="preset-mode"
                          :class="{ active: getCurrentPresetMode() === 'anyApproval' }"
                          @click="applyPresetMode('anyApproval')">
                          <el-icon><User /></el-icon>
                          <span>任一通过</span>
                          <small>任何一人通过即可</small>
                        </div>
                        <div 
                          class="preset-mode"
                          :class="{ active: getCurrentPresetMode() === 'custom' }"
                          @click="applyPresetMode('custom')">
                          <el-icon><Setting /></el-icon>
                          <span>自定义</span>
                          <small>手动配置参数</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              
                <!-- 会签类型选择 -->
                <div class="property-group">
                  <div class="property-row">
                    <div class="property-label">
                      执行方式
                      <el-tooltip :content="multiInstanceType === 'parallel' ? '所有人同时处理，效率更高' : '按顺序依次处理，便于管控'" placement="top">
                        <el-icon class="help-icon"><InfoFilled /></el-icon>
                      </el-tooltip>
                    </div>
                    <div class="property-input">
                      <el-radio-group 
                        v-model="multiInstanceType" 
                        size="small"
                        @change="(value: string | number | boolean | undefined) => updateMultiInstanceType(value as 'sequential' | 'parallel')">
                        <el-radio-button value="parallel">
                          <el-icon><Connection /></el-icon>
                          并行处理
                        </el-radio-button>
                        <el-radio-button value="sequential">
                          <el-icon><Document /></el-icon>
                          顺序处理
                        </el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              
                <!-- 基础配置 -->
                <div class="basic-config">
                  <div class="config-header">
                    <span class="config-title">
                      <el-button type="text" size="small" @click="showAdvancedConfig = !showAdvancedConfig">
                        {{ showAdvancedConfig ? '收起高级配置' : '展开高级配置' }}
                        <el-icon v-if="showAdvancedConfig"><ArrowUp /></el-icon>
                        <el-icon v-else><ArrowDown /></el-icon>
                      </el-button>
                    </span>
                  </div>
                </div>
              
                <!-- 高级配置 -->
                <div v-if="showAdvancedConfig" class="advanced-config">
                  <div class="config-header">
                    <span class="config-title">高级配置</span>
                  </div>
                  
                  <div class="property-group">
                    <div class="property-row">
                      <div class="property-label">
                        集合变量
                        <el-tooltip content="自定义集合变量，留空使用默认值：${assigneeList}" placement="top">
                          <el-icon class="help-icon"><InfoFilled /></el-icon>
                        </el-tooltip>
                      </div>
                      <div class="property-input">
                        <el-input
                          v-model="collection"
                          placeholder="默认：\${assigneeList}"
                          size="small"
                          @change="updateCollection">
                          <template #suffix>
                            <el-tooltip content="包含会签人列表的变量名" placement="top">
                              <el-icon class="input-help"><QuestionFilled /></el-icon>
                            </el-tooltip>
                          </template>
                        </el-input>
                      </div>
                    </div>
                  </div>
                  
                  <div class="property-group">
                    <div class="property-row">
                      <div class="property-label">
                        元素变量
                        <el-tooltip content="自定义元素变量，留空使用默认值：assignee" placement="top">
                          <el-icon class="help-icon"><InfoFilled /></el-icon>
                        </el-tooltip>
                      </div>
                      <div class="property-input">
                        <el-input
                          v-model="elementVariable"
                          placeholder="默认：assignee"
                          size="small"
                          @change="updateElementVariable">
                          <template #suffix>
                            <el-tooltip content="当前会签人的变量名" placement="top">
                              <el-icon class="input-help"><QuestionFilled /></el-icon>
                            </el-tooltip>
                          </template>
                        </el-input>
                      </div>
                    </div>
                  </div>
                  
                  <div class="property-group">
                    <div class="property-row">
                      <div class="property-label">
                        循环基数
                        <el-tooltip content="固定的会签人数，与集合变量二选一使用" placement="top">
                          <el-icon class="help-icon"><InfoFilled /></el-icon>
                        </el-tooltip>
                      </div>
                      <div class="property-input">
                        <el-input-number
                          v-model="loopCardinality"
                          :min="1"
                          :max="100"
                          size="small"
                          placeholder="留空使用集合变量"
                          @change="(value: number | undefined) => updateLoopCardinality(value || 1)" />
                      </div>
                    </div>
                  </div>
                  
                  <div class="property-group">
                    <div class="property-row">
                      <div class="property-label">
                        完成条件
                        <el-tooltip content="自定义会签完成条件，留空使用预设模式的条件" placement="top">
                          <el-icon class="help-icon"><InfoFilled /></el-icon>
                        </el-tooltip>
                      </div>
                      <div class="property-input">
                        <el-input
                          v-model="completionCondition"
                          placeholder="如：\${nrOfCompletedInstances/nrOfInstances >= 0.5}"
                          size="small"
                          @change="updateCompletionCondition">
                          <template #suffix>
                            <el-tooltip content="会签完成的条件表达式" placement="top">
                              <el-icon class="input-help"><QuestionFilled /></el-icon>
                            </el-tooltip>
                          </template>
                        </el-input>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 常用表达式示例 -->
                  <div class="expression-examples">
                    <div class="examples-title">常用表达式</div>
                    <div class="example-item" @click="setCompletionCondition('${nrOfCompletedInstances >= nrOfInstances}')">
                      <code>\${nrOfCompletedInstances >= nrOfInstances}</code>
                      <span>全员通过</span>
                    </div>
                    <div class="example-item" @click="setCompletionCondition('${nrOfCompletedInstances/nrOfInstances >= 0.5}')">
                      <code>\${nrOfCompletedInstances/nrOfInstances >= 0.5}</code>
                      <span>过半通过</span>
                    </div>
                    <div class="example-item" @click="setCompletionCondition('${nrOfCompletedInstances >= 1}')">
                      <code>\${nrOfCompletedInstances >= 1}</code>
                      <span>任一通过</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>

          <!-- 截止时间设置 -->
          <div class="property-group feature-highlight time-feature">
            <div class="property-row">
              <div class="property-label">
                <el-icon class="feature-icon"><Clock /></el-icon>
                截止时间
                <el-tooltip content="可通过相对时间、绝对时间或表达式方式设置任务截止时间" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="property-input">
                <DueDateSetter
                  v-model="dueDate"
                  @change="updateFlowableProperty('dueDate', $event)" />
              </div>
            </div>
          </div>

          <!-- 审批人为空处理策略 -->
          <div class="property-group feature-highlight assignee-empty-feature">
            <div class="property-row">
              <div class="property-label">
                <el-icon class="feature-icon"><Warning /></el-icon>
                审批人为空
                <el-tooltip content="配置当审批人为空或无法确定时的处理方式" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="property-input">
                <el-select
                  v-model="emptyAssigneeStrategy"
                  placeholder="请选择处理策略"
                  size="small"
                  @change="updateEmptyAssigneeStrategy">
                  <el-option
                    label="自动同意"
                    value="autoApprove">
                    <div class="option-content">
                      <span>自动同意</span>
                      <small>审批人为空时自动通过任务</small>
                    </div>
                  </el-option>
                  <el-option
                    label="自动拒绝"
                    value="autoReject">
                    <div class="option-content">
                      <span>自动拒绝</span>
                      <small>审批人为空时自动拒绝任务</small>
                    </div>
                  </el-option>
                  <el-option
                    label="跳过任务"
                    value="skipTask">
                    <div class="option-content">
                      <span>跳过任务</span>
                      <small>审批人为空时直接跳过该任务</small>
                    </div>
                  </el-option>
                  <el-option
                    label="指定默认人"
                    value="assignDefault">
                    <div class="option-content">
                      <span>指定默认人</span>
                      <small>审批人为空时分配给默认审批人</small>
                    </div>
                  </el-option>
                  <el-option
                    label="抛出异常"
                    value="throwError">
                    <div class="option-content">
                      <span>抛出异常</span>
                      <small>审批人为空时流程异常终止</small>
                    </div>
                  </el-option>
                </el-select>
              </div>
            </div>
            
            <!-- 默认审批人设置（当策略为指定默认人时显示） -->
            <template v-if="emptyAssigneeStrategy === 'assignDefault'">
              <div class="property-row" style="margin-top: 12px;">
                <div class="property-label">
                </div>
                <div class="property-input">
                  <el-select
                    v-model="defaultAssignee"
                    placeholder="请选择默认审批人"
                    size="small"
                    filterable
                    allow-create
                    @change="updateDefaultAssignee">
                    <el-option-group label="系统角色">
                      <el-option label="系统管理员" value="${systemAdmin}">
                        <div class="option-content">
                          <span>系统管理员</span>
                          <small>${systemAdmin}</small>
                        </div>
                      </el-option>
                      <el-option label="流程管理员" value="${processAdmin}">
                        <div class="option-content">
                          <span>流程管理员</span>
                          <small>${processAdmin}</small>
                        </div>
                      </el-option>
                    </el-option-group>
                    <el-option-group label="组织架构">
                      <el-option label="部门负责人" value="${deptManager}">
                        <div class="option-content">
                          <span>部门负责人</span>
                          <small>${deptManager}</small>
                        </div>
                      </el-option>
                      <el-option label="上级领导" value="${supervisor}">
                        <div class="option-content">
                          <span>上级领导</span>
                          <small>${supervisor}</small>
                        </div>
                      </el-option>
                    </el-option-group>
                  </el-select>
                </div>
              </div>
            </template>
          </div>

          <!-- 自动同意设置 -->
          <div class="property-group feature-highlight approval-feature">
            <div class="property-row">
              <div class="property-label">
                <el-icon class="feature-icon"><CircleCheckFilled /></el-icon>
                自动同意
                <el-tooltip content="配置在特定情况下自动同意任务，避免重复审批" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="property-input">
                <div class="auto-approve-options">
                  <el-checkbox-group
                    v-model="autoApproveSettings"
                    @change="(value: any) => updateAutoApproveSettings(value as string[])">
                    <div class="checkbox-item">
                      <el-checkbox value="assigneeIsInitiator">
                        <div class="checkbox-content">
                          <span class="checkbox-label">审批人为发起人</span>
                        </div>
                      </el-checkbox>
                    </div>
                    <div class="checkbox-item">
                      <el-checkbox value="assigneeIsPreviousApprover">
                        <div class="checkbox-content">
                          <span class="checkbox-label">审批人与上一节点处理人相同</span>
                        </div>
                      </el-checkbox>
                    </div>
                    <div class="checkbox-item">
                      <el-checkbox value="assigneeAlreadyApproved">
                        <div class="checkbox-content">
                          <span class="checkbox-label">审批人已处理过</span>
                        </div>
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 服务任务配置 -->
      <div v-if="isServiceTask" class="property-section">
        <div class="section-header">
          <span class="section-title">服务配置</span>
          <el-tooltip content="配置服务任务的实现方式" placement="top">
            <el-icon class="section-help"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="section-content">
          <div class="property-group">
            <div class="property-row">
              <div class="property-label">实现类型</div>
              <div class="property-input">
                <el-select
                  v-model="serviceType"
                  size="small"
                  @change="handleServiceTypeChange">
                  <el-option
                    label="Java类"
                    value="class">
                    <div class="option-content">
                      <span>Java类</span>
                      <small>实现JavaDelegate接口的Java类</small>
                    </div>
                  </el-option>
                  <el-option
                    label="表达式"
                    value="expression">
                    <div class="option-content">
                      <span>表达式</span>
                      <small>Spring EL表达式，调用Bean方法</small>
                    </div>
                  </el-option>
                  <el-option
                    label="代理表达式"
                    value="delegateExpression">
                    <div class="option-content">
                      <span>代理表达式</span>
                      <small>返回JavaDelegate实现的表达式</small>
                    </div>
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="property-group">
            <div class="property-row">
              <div class="property-label">{{ serviceTypeLabel }}</div>
              <div class="property-input">
                <el-input
                  v-model="serviceValue"
                  :placeholder="getServicePlaceholder()"
                  size="small"
                  @change="updateServiceImplementation">
                  <template #suffix>
                    <el-tooltip :content="getServiceTooltip()" placement="top">
                      <el-icon class="input-help"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </template>
                </el-input>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 条件配置区域 -->
      <div v-if="isSequenceFlow" class="property-section">
        <div class="section-header">
          <span class="section-title">条件配置</span>
          <el-tooltip content="配置连接线的流转条件" placement="top">
            <el-icon class="section-help"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="section-content">
          <!-- 条件类型选择 -->
          <div class="property-group feature-highlight condition-feature">
            <div class="property-row">
              <div class="property-label">
                <el-icon class="feature-icon"><Files /></el-icon>
                条件类型
                <el-tooltip content="选择连接线的条件类型" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="property-input">
                <el-select
                  v-model="conditionType"
                  size="small"
                  @change="updateConditionType">
                  <el-option label="普通流转路径" value="normal">
                    <div class="option-content">
                      <span>普通流转路径</span>
                      <small>无条件限制，自由流转</small>
                    </div>
                  </el-option>
                  <el-option label="默认流转路径" value="default">
                    <div class="option-content">
                      <span>默认流转路径</span>
                      <small>其他条件都不满足时的默认路径</small>
                    </div>
                  </el-option>
                  <el-option label="条件流转路径" value="conditional">
                    <div class="option-content">
                      <span>条件流转路径</span>
                      <small>需要满足指定条件才能流转</small>
                    </div>
                  </el-option>
                  <el-option label="内置按钮" value="builtinButton">
                    <div class="option-content">
                      <span>内置按钮</span>
                      <small>基于操作权限的预设条件路径</small>
                    </div>
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>

          <!-- 条件表达式配置 -->
          <template v-if="conditionType === 'conditional'">
            <div class="property-group">
              <div class="property-label">
                条件表达式
                <el-tooltip content="使用表达式语言编写判断条件" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <el-input
                v-model="conditionExpression"
                type="textarea"
                :rows="3"
                placeholder="请输入条件表达式，如：${approved == true}"
                resize="none"
                @change="updateConditionExpression" />
            </div>
            
            <!-- 表达式示例 -->
            <div class="expression-examples">
              <div class="examples-title">常用表达式示例</div>
              <div class="example-item" @click="setExpressionExample('${approved == true}')">
                <code>${approved == true}</code>
                <span>审批通过</span>
              </div>
              <div class="example-item" @click="setExpressionExample('${amount > 1000}')">
                <code>${amount > 1000}</code>
                <span>金额大于1000</span>
              </div>
              <div class="example-item" @click="setExpressionExample('${user.dept == &quot;finance&quot;}')">
                <code>${user.dept == "finance"}</code>
                <span>财务部门</span>
              </div>
              <div class="example-item" @click="setExpressionExample('${execution.getVariable(&quot;result&quot;) == &quot;pass&quot;}')">
                <code>${execution.getVariable("result") == "pass"}</code>
                <span>变量判断</span>
              </div>
            </div>
          </template>

          <!-- 内置按钮配置 -->
          <template v-if="conditionType === 'builtinButton'">
            <div class="property-group">
              <div class="property-label">
                选择按钮
                <el-tooltip content="选择对应的操作按钮，系统会自动生成条件表达式" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <el-select
                v-model="conditionExpression"
                size="small"
                @change="updateConditionExpression"
                placeholder="请选择对应的操作按钮">
                <el-option
                  v-for="button in builtinButtonOptions"
                  :key="button.value"
                  :label="button.label"
                  :value="button.expression">
                  <div class="option-content">
                    <span>{{ button.label }}</span>
                    <small>{{ button.expression }}</small>
                  </div>
                </el-option>
              </el-select>
            </div>
            
            <!-- 当前条件表达式预览 -->
            <div v-if="conditionExpression" class="expression-preview">
              <div class="preview-title">生成的条件表达式：</div>
              <div class="preview-content">
                <code>{{ conditionExpression }}</code>
              </div>
            </div>
          </template>

          <!-- 默认流转路径说明 -->
          <template v-if="conditionType === 'default'">
            <div class="condition-notice">
              <el-icon class="notice-icon"><InfoFilled /></el-icon>
              <div class="notice-text">
                <strong>默认流转路径说明：</strong><br>
                当从网关或分支节点出发的其他所有条件都不满足时，会选择默认流转路径。每个网关只能有一条默认流转路径。
              </div>
            </div>
          </template>

          <!-- 普通流转路径说明 -->
          <template v-if="conditionType === 'normal'">
            <div class="condition-notice">
              <el-icon class="notice-icon"><InfoFilled /></el-icon>
              <div class="notice-text">
                <strong>普通流转路径说明：</strong><br>
                无任何条件限制，流程会自动沿着此路径继续执行。适用于顺序流程或无分支的场景。
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- 表单配置标签页 -->
      <div v-if="isUserTask" class="property-section">
        <div class="section-header">
          <span class="section-title">表单配置</span>
          <el-tooltip content="配置任务的表单" placement="top">
            <el-icon class="section-help"><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="section-content">
          <!-- 表单标识设置 -->
          <div class="property-group">
            <div class="property-row">
              <div class="property-label">
                <el-icon class="feature-icon"><Document /></el-icon>
                表单标识
                <el-tooltip content="关联的表单组件或页面路径" placement="top">
                  <el-icon class="help-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
              <div class="property-input">
                <el-input
                  v-model="formKey"
                  placeholder="请输入表单标识"
                  size="small"
                  @change="updateFlowableProperty('formKey', $event)" />
              </div>
            </div>
          </div>
          <el-tabs v-model="activePermissionTab" class="permission-tabs">
            <!-- 表单权限标签页 -->
            <el-tab-pane label="表单权限" name="form">
              <div class="tab-content">
                <div class="tab-header">
                  <div class="tab-title">
                    <el-icon><Document /></el-icon>
                    <span>表单字段权限控制</span>
                    <el-tooltip content="配置表单字段的显示权限：只读、可编辑或隐藏" placement="top">
                      <el-icon class="help-icon"><InfoFilled /></el-icon>
                    </el-tooltip>
                  </div>
                  <div class="tab-actions">
                    <el-button type="primary" size="small" @click="showImportDialog = true">
                      <el-icon><Upload /></el-icon>
                      批量导入
                    </el-button>
                    <el-button type="primary" size="small" @click="addFormField">
                      <el-icon><Plus /></el-icon>
                      添加字段
                    </el-button>
                  </div>
                </div>
                
                <template v-if="formFieldPermissions.length">
                  <div class="form-fields-table">
                    <div class="table-header">
                      <div class="header-cell field-name">字段名称</div>
                      <div class="header-cell field-label">字段标签</div>
                      <div class="header-cell field-permission">权限</div>
                      <div class="header-cell field-actions">操作</div>
                    </div>
                    <div class="table-body">
                      <div 
                        v-for="(field, index) in formFieldPermissions" 
                        :key="index" 
                        class="table-row">
                        <div class="table-cell field-name">
                          <el-input 
                            :model-value="field.fieldName"
                            size="small"
                            @input="updateFieldPermission(index, 'fieldName', $event)"
                            placeholder="字段名称" />
                        </div>
                        <div class="table-cell field-label">
                          <el-input 
                            :model-value="field.fieldLabel"
                            size="small"
                            @input="updateFieldPermission(index, 'fieldLabel', $event)"
                            placeholder="字段标签" />
                        </div>
                        <div class="table-cell field-permission">
                          <el-select
                            :model-value="field.permission"
                            size="small"
                            @change="updateFieldPermission(index, 'permission', $event)">
                            <el-option label="只读" value="readonly">
                              <div class="permission-option">
                                <el-icon class="readonly-icon"><View /></el-icon>
                                <span>只读</span>
                              </div>
                            </el-option>
                            <el-option label="可编辑" value="editable">
                              <div class="permission-option">
                                <el-icon class="editable-icon"><Edit /></el-icon>
                                <span>可编辑</span>
                              </div>
                            </el-option>
                            <el-option label="隐藏" value="hidden">
                              <div class="permission-option">
                                <el-icon class="hidden-icon"><Hide /></el-icon>
                                <span>隐藏</span>
                              </div>
                            </el-option>
                          </el-select>
                        </div>
                        <div class="table-cell field-actions">
                          <el-button
                            type="danger"
                            text
                            size="small"
                            @click="removeFormField(index)">
                            <el-icon><Delete /></el-icon>
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div v-else class="empty-state">
                  <el-icon class="empty-icon"><Document /></el-icon>
                  <div class="empty-text">暂无表单字段</div>
                  <div class="empty-actions">
                    <el-button type="primary" size="small" @click="addFormField">
                      添加表单字段
                    </el-button>
                    <el-button type="primary" size="small" @click="showImportDialog = true">
                      批量导入
                    </el-button>
                  </div>
                </div>

              </div>
            </el-tab-pane>
            
            <!-- 操作权限标签页 -->
            <el-tab-pane label="操作权限" name="operation">
              <div class="tab-content">
                <div class="tab-header">
                  <div class="tab-title">
                    <el-icon><Setting /></el-icon>
                    <span>操作按钮权限控制</span>
                    <el-tooltip content="可以为操作项设置别名和审批状态，只有勾选“允许操作”的项目才会在流程中生效" placement="top">
                      <el-icon class="help-icon"><InfoFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </div>
                
                <div class="permissions-table">
                  <div class="table-header">
                    <div class="header-cell operation-name">操作项</div>
                    <div class="header-cell operation-alias">定义别名</div>
                    <div class="header-cell operation-status">审批状态</div>
                    <div class="header-cell operation-enable">允许操作</div>
                  </div>
                  <div class="table-body">
                    <div 
                      v-for="(permission, index) in operationPermissions" 
                      :key="index" 
                      class="table-row">
                      <div class="table-cell operation-name">
                        <span class="operation-text">{{ permission.name }}</span>
                      </div>
                      <div class="table-cell operation-alias">
                        <el-input 
                          :model-value="permission.alias"
                          size="small"
                          @input="updateOperationPermission(index, 'alias', $event)"
                          placeholder="请输入别名" />
                      </div>
                      <div class="table-cell operation-status">
                        <el-input 
                          :model-value="permission.status"
                          size="small"
                          @input="updateOperationPermission(index, 'status', $event)"
                          placeholder="请输入状态" />
                      </div>
                      <div class="table-cell operation-enable">
                        <el-checkbox 
                          :model-value="permission.enabled"
                          @change="updateOperationPermission(index, 'enabled', $event)"
                          size="large" />
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      
      <!-- 批量导入对话框 -->
      <el-dialog 
        v-model="showImportDialog" 
        title="批量导入表单字段" 
        width="510px"
        :before-close="handleCloseImportDialog">
        <div class="import-content">
          <div class="import-tip">
            <el-tooltip content="请按照格式输入，每行一个字段，格式：字段名称|字段标签" placement="top">
              <el-icon class="help-icon"><InfoFilled /></el-icon>
            </el-tooltip>
            <span>批量导入提示</span>
          </div>
          <el-input
            v-model="importText"
            type="textarea"
            :rows="8"
            placeholder="示例：&#10;username|用户名&#10;email|邮箱地址&#10;phone|电话号码"
            resize="none" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showImportDialog = false">取消</el-button>
            <el-button type="primary" @click="handleImportConfirm">确定导入</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script setup lang="ts">

import {
  ElButton,
  ElInput,
  ElInputNumber,
  ElOption,
  ElOptionGroup,
  ElSelect,
  ElRadioGroup,
  ElRadioButton,
  ElIcon,
  ElTooltip,
  ElMessage,
  ElCheckboxGroup,
  ElCheckbox,
  ElDialog,
  ElTabs,
  ElTabPane,
  ElSwitch
} from 'element-plus';
import { 
  QuestionFilled, 
  DocumentCopy, 
  InfoFilled,
  User,
  Setting,
  Files,
  Connection,
  Monitor,
  Plus,
  Delete,
  Upload,
  Document,
  View,
  Edit,
  Hide,
  ArrowUp,
  ArrowDown,
  Warning,
  Clock,
  CircleCheckFilled
} from '@element-plus/icons-vue';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import { ref, computed } from 'vue';
import { usePropertyPanel } from '../composables/usePropertyPanel';
import DueDateSetter from './DueDateSetter.vue';

const props = defineProps<{
  modeler: BpmnModeler;
  // 添加审批人、候选用户、候选组的选项数据
  assigneeOptions?: Array<{ label: string; value: string }>;
  candidateUserOptions?: Array<{ label: string; value: string }>;
  candidateGroupOptions?: Array<{ label: string; value: string }>;
}>();

// 使用属性面板组合式函数
const {
  selectedElement,
  elementId,
  elementName,
  processId,
  processName,
  
  // 流程扩展属性
  userCallbackAddress,
  handleCallbackAddress,
  
  // 用户任务属性
  assignee,
  handleAssigneeChange,
  handleCandidateUsersChange,
  handleCandidateGroupsChange,
  candidateUsers,
  candidateGroups,
  dueDate,
  formKey,
  
  // 审批模式
  approvalMode,
  updateApprovalMode,
  
  // 会签设置
  isMultiInstance,
  multiInstanceType,
  loopCardinality,
  collection,
  elementVariable,
  completionCondition,
  
  conditionExpression,
  conditionType,
  serviceType,
  serviceValue,
  formFieldPermissions,
  operationPermissions,
  isProcess,
  isUserTask,
  isServiceTask,
  isSequenceFlow,
  serviceTypeLabel,
  builtinButtonOptions,
  updateProperty,
  updateFlowableProperty,
  handleServiceTypeChange,
  updateServiceImplementation,
  updateConditionExpression,
  updateConditionType,
  
  // 会签相关方法
  toggleMultiInstance,
  updateMultiInstanceType,
  updateLoopCardinality,
  updateCollection,
  updateElementVariable,
  updateCompletionCondition,
  
  addFormField,
  removeFormField,
  updateFieldPermission,
  importFormFields,
  updateOperationPermission,

  autoApproveSettings,
  updateAutoApproveSettings
} = usePropertyPanel(props);

// 添加审批模式状态
// const approvalMode = ref<'assignee' | 'candidate' | 'external'>('assignee');

// 审批人为空时处理策略
const emptyAssigneeStrategy = ref<string>('autoApprove');
const defaultAssignee = ref<string>('');

// 权限配置标签页状态
const activePermissionTab = ref('form');

// 批量导入相关
const showImportDialog = ref(false);
const importText = ref('');

// 会签设置相关状态
const showAdvancedConfig = ref(false);

// 预设模式映射
const presetModes = {
  allApproval: {
    completionCondition: '${nrOfCompletedInstances >= nrOfInstances}',
    description: '所有人都需要通过'
  },
  majorityApproval: {
    completionCondition: '${nrOfCompletedInstances/nrOfInstances >= 0.5}',
    description: '超过50%通过即可'
  },
  anyApproval: {
    completionCondition: '${nrOfCompletedInstances >= 1}',
    description: '任何一人通过即可'
  },
  custom: {
    completionCondition: '',
    description: '手动配置参数'
  }
};

// 获取当前预设模式
const getCurrentPresetMode = () => {
  const condition = completionCondition.value;
  if (condition === '${nrOfCompletedInstances >= nrOfInstances}') return 'allApproval';
  if (condition === '${nrOfCompletedInstances/nrOfInstances >= 0.5}') return 'majorityApproval';
  if (condition === '${nrOfCompletedInstances >= 1}') return 'anyApproval';
  return 'custom';
};

// 应用预设模式
const applyPresetMode = (mode: keyof typeof presetModes) => {
  const preset = presetModes[mode];
  if (preset) {
    completionCondition.value = preset.completionCondition;
    updateCompletionCondition(preset.completionCondition);
  }
};

// 设置完成条件
const setCompletionCondition = (condition: string) => {
  completionCondition.value = condition;
  updateCompletionCondition(condition);
};

// 处理导入确认
const handleImportConfirm = () => {
  if (!importText.value.trim()) {
    ElMessage.warning('请输入要导入的字段信息');
    return;
  }
  
  const lines = importText.value.trim().split('\n');
  const fields: Array<{fieldName: string; fieldLabel: string}> = [];
  
  for (const line of lines) {
    const parts = line.trim().split('|');
    if (parts.length === 2) {
      const fieldName = parts[0].trim();
      const fieldLabel = parts[1].trim();
      if (fieldName && fieldLabel) {
        fields.push({ fieldName, fieldLabel });
      }
    }
  }
  
  if (fields.length === 0) {
    ElMessage.warning('没有解析到有效的字段信息，请检查格式');
    return;
  }
  
  importFormFields(fields);
  ElMessage.success(`成功导入 ${fields.length} 个字段`);
  showImportDialog.value = false;
  importText.value = '';
};

// 关闭导入对话框
const handleCloseImportDialog = () => {
  importText.value = '';
  showImportDialog.value = false;
};

// 获取元素图标
const getElementIcon = () => {
  if (!selectedElement.value) return Files;
  const type = selectedElement.value.type;
  switch (type) {
    case 'bpmn:UserTask': return User;
    case 'bpmn:ServiceTask': return Setting;
    case 'bpmn:SequenceFlow': return Connection;
    case 'bpmn:Process': return Files;
    default: return Monitor;
  }
};

// 获取元素标题
const getElementTitle = () => {
  if (!selectedElement.value) return '流程属性';
  const type = selectedElement.value.type;
  switch (type) {
    case 'bpmn:Process': return '流程属性';
    case 'bpmn:UserTask': return '用户任务';
    case 'bpmn:ServiceTask': return '服务任务';
    case 'bpmn:ScriptTask': return '脚本任务';
    case 'bpmn:SequenceFlow': return '连接线';
    case 'bpmn:StartEvent': return '开始事件';
    case 'bpmn:EndEvent': return '结束事件';
    case 'bpmn:ExclusiveGateway': return '排他网关';
    case 'bpmn:ParallelGateway': return '并行网关';
    default: return '节点属性';
  }
};

// 获取元素副标题
const getElementSubtitle = () => {
  if (!selectedElement.value) return '配置流程基础信息';
  return `ID: ${selectedElement.value.id || '未设置'}`;
};

// 复制元素ID
const copyElementId = async () => {
  if (!selectedElement.value?.id) return;
  try {
    await navigator.clipboard.writeText(selectedElement.value.id);
    ElMessage.success('ID已复制到剪贴板');
  } catch {
    ElMessage.error('复制失败');
  }
};

// 处理审批模式变更
const handleApprovalModeChange = (value: string | number | boolean | undefined) => {
  const mode = value as 'assignee' | 'candidate' | 'external';
  updateApprovalMode(mode);
};

// 更新空审批人处理策略
const updateEmptyAssigneeStrategy = (strategy: string) => {
  emptyAssigneeStrategy.value = strategy;
  updateFlowableProperty('emptyAssigneeStrategy', strategy);
  
  // 如果不是指定默认人策略，清空默认审批人
  if (strategy !== 'assignDefault') {
    defaultAssignee.value = '';
    updateFlowableProperty('defaultAssignee', undefined);
  }
};

// 更新默认审批人
const updateDefaultAssignee = (assignee: string) => {
  defaultAssignee.value = assignee;
  updateFlowableProperty('defaultAssignee', assignee);
};

// 设置表达式示例
const setExpressionExample = (example: string) => {
  conditionExpression.value = example;
  updateConditionExpression(example);
};

// 获取服务类型占位符
const getServicePlaceholder = () => {
  switch (serviceType.value) {
    case 'class': return 'com.example.MyServiceTask';
    case 'expression': return '${myBean.processTask()}';
    case 'delegateExpression': return '${myDelegate}';
    default: return '';
  }
};

// 获取服务类型提示
const getServiceTooltip = () => {
  switch (serviceType.value) {
    case 'class': return '完整的Java类名，需实现JavaDelegate接口';
    case 'expression': return 'Spring表达式，直接调用Bean方法';
    case 'delegateExpression': return '返回JavaDelegate实现的表达式';
    default: return '';
  }
};

// 监听审批模式变化
computed(() => {
  if (assignee.value) {
    approvalMode.value = 'assignee';
  } else if (candidateUsers.value.length > 0 || candidateGroups.value.length > 0) {
    approvalMode.value = 'candidate';
  }
});
</script>

<style scoped lang="scss">
// ===========================================
// 基础样式变量
// ===========================================
$primary-color: #3b82f6;
$border-color: #e5e7eb;
$text-color: #1f2937;
$text-secondary: #6b7280;
$text-muted: #9ca3af;
$bg-hover: #f9fafb;
$radius: 6px;
$radius-small: 4px;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;

// ===========================================
// 通用组件类
// ===========================================

// 基础表格样式
.base-table {
  border: 1px solid $border-color;
  border-radius: $radius;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .table-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid $border-color;
    
    .header-cell {
      padding: 10px $spacing-md;
      font-size: 13px;
      font-weight: 600;
      color: $text-color;
      text-align: center;
      border-right: 1px solid $border-color;
      letter-spacing: -0.025em;
      
      &:last-child {
        border-right: none;
      }
      
      &.text-left {
        text-align: left;
      }
    }
  }
  
  .table-body {
    .table-row {
      border-bottom: 1px solid #f3f4f6;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: $bg-hover;
        transform: translateX(2px);
        box-shadow: inset 3px 0 0 $primary-color;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .table-cell {
        padding: 10px $spacing-md;
        display: flex;
        align-items: center;
        border-right: 1px solid #f3f4f6;
        min-height: 46px;
        
        &:last-child {
          border-right: none;
        }
        
        &.text-center {
          justify-content: center;
        }
      }
    }
  }
}

// 基础卡片样式
.base-card {
  background: #fff;
  border-radius: $radius;
  overflow: hidden;
  
  &.with-border {
    border: 1px solid $border-color;
  }
  
  &.with-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
}

// 基础帮助提示
.base-help {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px $spacing-md;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: $radius;
  border: 1px solid #bae6fd;
  
  .el-icon {
    color: #0ea5e9;
    font-size: 14px;
    flex-shrink: 0;
  }
  
  span {
    font-size: 12px;
    color: #0c4a6e;
    line-height: 1.4;
  }
}

// 基础空状态
.base-empty {
  text-align: center;
  padding: 30px $spacing-lg;
  
  .empty-icon {
    font-size: 40px;
    color: #d9d9d9;
    margin-bottom: 10px;
  }
  
  .empty-text {
    font-size: 13px;
    color: #8c8c8c;
    margin-bottom: $spacing-md;
  }
  
  .empty-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
  }
}

// ===========================================
// 主体布局
// ===========================================
.property-panel {
  height: 100%;
  width: 510px;
  background: #fff;
  border-left: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

// 面板头部
.panel-header {
  padding: $spacing-md $spacing-lg;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .element-info {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    
    .element-icon {
      width: 36px;
      height: 36px;
      border-radius: $radius;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 3px 8px rgba(102, 126, 234, 0.25);
    }
    
    .element-details {
      .element-title {
        font-size: 15px;
        font-weight: 600;
        color: $text-color;
        margin-bottom: 2px;
        letter-spacing: -0.025em;
      }
      
      .element-subtitle {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }
}

// 面板内容
.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

// 属性区域
.property-section {
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .section-header {
    padding: $spacing-md $spacing-lg $spacing-sm;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fefefe;
    border-bottom: 1px solid #f5f5f5;
    
    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: $text-color;
      letter-spacing: -0.025em;
    }
    
    .section-help {
      color: $text-muted;
      cursor: help;
      transition: color 0.2s;
      
      &:hover {
        color: $primary-color;
      }
    }
    
    .header-actions {
      display: flex;
      gap: $spacing-sm;
      
      .el-button {
        border-radius: $radius;
        font-weight: 500;
        transition: all 0.2s ease;
      }
    }
  }
  
  .section-content {
    padding: $spacing-lg;
  }
}

// 属性组
.property-group {
  margin-bottom: $spacing-lg;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  // 行内布局：label和输入框在同一行
  .property-row {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    
    .property-label {
      flex-shrink: 0;
      width: 105px;
      font-size: 13px;
      color: #374151;
      font-weight: 500;
      letter-spacing: -0.025em;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      
      .help-icon {
        margin-left: 4px;
        font-size: 12px;
        color: #9ca3af;
        cursor: help;
        transition: all 0.2s ease;
        
        &:hover {
          color: #6366f1;
          transform: scale(1.1);
        }
      }
    }
    
    .property-input {
      flex: 1;
    }
  }
  
  // 垂直布局：适用于复杂组件
  .property-label {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    
    .help-icon {
      margin-left: 4px;
      font-size: 12px;
      color: #9ca3af;
      cursor: help;
      transition: all 0.2s ease;
      
      &:hover {
        color: #6366f1;
        transform: scale(1.1);
      }
    }
  }
  
  .property-help {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
    margin-top: 6px;
    font-size: 11px;
    color: $text-secondary;
    
    .el-icon {
      font-size: 12px;
      color: $text-muted;
    }
  }
  
  // 为行内布局的帮助文本添加特殊样式
  .property-row + .property-help {
    margin-left: calc(80px + #{$spacing-md}); // 对齐到输入框位置
  }
}

// 表单属性列表
.form-properties-list {
  .form-property-item {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    
    .property-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: #f5f5f5;
      border-bottom: 1px solid #e8e8e8;
      
      .property-index {
        font-size: 12px;
        color: #8c8c8c;
        font-weight: 500;
      }
    }
    
    .property-item-content {
      padding: 12px;
      
      .property-row {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .property-field {
          flex: 1;
          
          .field-label {
            font-size: 12px;
            color: #8c8c8c;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}

// ===========================================
// 功能高亮区域统一样式
// ===========================================
.feature-highlight {
  position: relative;
  border-radius: $radius;
  border: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 10px;;
  transition: all 0.3s ease;

  &:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }

  .property-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #374151;
    
    .feature-icon {
      margin-right: 5px;
      font-size: 16px;
      color: #6b7280;
    }
    
    .help-icon {
      margin-left: auto;
      font-size: 14px;
      color: #9ca3af;
      cursor: help;
      transition: all 0.2s ease;
      
      &:hover {
        color: #6366f1;
        transform: scale(1.1);
      }
    }
  }

  .property-help {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: $radius-small;
    padding: 8px 12px;
    margin-top: $spacing-md;
  }

  // 不同类型的主题色彩
  &.time-feature {
    border-left: 4px solid #f59e0b;
    
    .feature-icon {
      color: #f59e0b;
    }
    
    &:hover {
      border-color: #fbbf24;
      background: linear-gradient(135deg, #fefbf3 0%, #fef3c7 100%);
    }
  }

  &.approval-feature {
    border-left: 4px solid #10b981;
    
    .feature-icon {
      color: #10b981;
    }
    
    &:hover {
      border-color: #34d399;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    }
  }

  &.collaboration-feature {
    border-left: 4px solid #8b5cf6;
    
    .feature-icon {
      color: #8b5cf6;
    }
    
    &:hover {
      border-color: #a78bfa;
      background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    }
  }

  &.assignee-feature {
    border-left: 4px solid #ec4899;
    
    .feature-icon {
      color: #ec4899;
    }
    
    &:hover {
      border-color: #f472b6;
      background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    }
  }

  &.assignee-empty-feature {
    border-left: 4px solid #ef4444;
    
    .feature-icon {
      color: #ef4444;
    }
    
    &:hover {
      border-color: #f87171;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }
  }

  &.condition-feature {
    border-left: 4px solid #06b6d4;
    
    .feature-icon {
      color: #06b6d4;
    }
    
    &:hover {
      border-color: #22d3ee;
      background: linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%);
    }
  }

}

.feature-expanded-content {
  border-top: 1px solid rgba(229, 231, 235, 0.6);
}

// ===========================================
// 业务特定样式
// ===========================================

// 权限配置标签页样式
.permission-tabs {
  border: none;
  
  // Tab 头部样式
  :deep(.el-tabs__header) {
    margin: 0 0 $spacing-lg 0;
    border-bottom: 2px solid #f0f0f0;
    
    .el-tabs__nav-wrap {
      &::after {
        display: none;
      }
    }
    
    .el-tabs__nav {
      border: none;
      
      .el-tabs__item {
        padding: 0 $spacing-xl;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        font-weight: 600;
        color: $text-secondary;
        border: none;
        border-radius: $radius $radius 0 0;
        transition: all 0.3s ease;
        position: relative;
        
        &:hover {
          color: $primary-color;
          background: #f8fafc;
        }
        
        &.is-active {
          color: $primary-color;
          background: #fff;
          border: 1px solid #f0f0f0;
          border-bottom: 2px solid #fff;
          margin-bottom: -2px;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, $primary-color 0%, #2563eb 100%);
            border-radius: 2px 2px 0 0;
          }
        }
      }
    }
    
    .el-tabs__active-bar {
      display: none;
    }
  }
  
  // Tab 内容区域
  :deep(.el-tabs__content) {
    padding: 0;
    
    .el-tab-pane {
      padding: 0;
    }
  }
}

// Tab 内容区域
.tab-content {
  background: #fff;
  border-radius: 0 $radius $radius $radius;
  
  .tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-md 0 $spacing-lg;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: $spacing-lg;
    
    .tab-title {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      
      .el-icon {
        font-size: 16px;
        color: $primary-color;
      }
      
      span {
        font-size: 14px;
        font-weight: 600;
        color: $text-color;
        letter-spacing: -0.025em;
      }
      
      .help-icon {
        margin-left: 4px;
        font-size: 14px;
        color: #9ca3af;
        cursor: help;
        transition: all 0.2s ease;
        
        &:hover {
          color: #6366f1;
          transform: scale(1.1);
        }
      }
    }
    
    .tab-actions {
      display: flex;
      gap: $spacing-sm;
      
      .el-button {
        border-radius: $radius;
        font-weight: 500;
        transition: all 0.2s ease;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
        }
      }
    }
  }
}

// 表单字段表格
.form-fields-table {
  border: 1px solid $border-color;
  border-radius: $radius;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 140px 90px;
    gap: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid $border-color;
    
    .header-cell {
      padding: 10px $spacing-md;
      font-size: 13px;
      font-weight: 600;
      color: $text-color;
      text-align: center;
      border-right: 1px solid $border-color;
      letter-spacing: -0.025em;
      
      &:last-child {
        border-right: none;
      }
      
      &.field-name,
      &.field-label {
        text-align: center;
      }
    }
  }
  
  .table-body {
    .table-row {
      display: grid;
      grid-template-columns: 1fr 1fr 140px 90px;
      gap: 0;
      border-bottom: 1px solid #f3f4f6;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: $bg-hover;
        transform: translateX(2px);
        box-shadow: inset 3px 0 0 $primary-color;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .table-cell {
        padding: 10px $spacing-md;
        display: flex;
        align-items: center;
        border-right: 1px solid #f3f4f6;
        min-height: 46px;
        
        &:last-child {
          border-right: none;
        }
        
        &.field-actions {
          justify-content: center;
        }
      }
    }
  }
}

// 操作权限表格
.permissions-table {
  border: 1px solid $border-color;
  border-radius: $radius;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .table-header {
    display: grid;
    grid-template-columns: 100px 1fr 140px 90px;
    gap: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid $border-color;
    
    .header-cell {
      padding: 10px $spacing-md;
      font-size: 13px;
      font-weight: 600;
      color: $text-color;
      text-align: center;
      border-right: 1px solid $border-color;
      letter-spacing: -0.025em;
      
      &:last-child {
        border-right: none;
      }
      
      &.operation-name {
        text-align: center;
      }
    }
  }
  
  .table-body {
    .table-row {
      display: grid;
      grid-template-columns: 100px 1fr 140px 90px;
      gap: 0;
      border-bottom: 1px solid #f3f4f6;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: $bg-hover;
        transform: translateX(2px);
        box-shadow: inset 3px 0 0 $primary-color;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .table-cell {
        padding: 1px $spacing-md;
        display: flex;
        align-items: center;
        border-right: 1px solid #f3f4f6;
        
        &:last-child {
          border-right: none;
        }
        
        &.operation-name {
          justify-content: center;
          .operation-text {
            font-size: 13px;
            color: $text-color;
            font-weight: 500;
          }
        }
        
        &.operation-alias {
          padding: $spacing-sm $spacing-md;
        }
        
        &.operation-status {
          padding: $spacing-sm $spacing-md;
        }
        
        &.operation-enable {
          justify-content: center;
        }
      }
    }
  }
}

// 权限选项样式
.permission-option {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  
  .readonly-icon {
    color: #909399;
  }
  
  .editable-icon {
    color: #67c23a;
  }
  
  .hidden-icon {
    color: #f56c6c;
  }
}

// 权限帮助信息
.permissions-help {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px $spacing-md;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: $radius;
  border: 1px solid #bae6fd;
  margin-top: $spacing-md;
  
  .el-icon {
    color: #0ea5e9;
    font-size: 14px;
    flex-shrink: 0;
  }
  
  span {
    font-size: 12px;
    color: #0c4a6e;
    line-height: 1.4;
  }
}

// 导入对话框
.import-content {
  .import-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: $spacing-md;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: $radius;
    margin-bottom: $spacing-lg;
    
    .el-icon {
      color: #0ea5e9;
      margin-top: 2px;
      flex-shrink: 0;
      font-size: 14px;
    }
    
    .help-icon {
      color: #0ea5e9;
      margin-top: 2px;
      margin-right: 6px;
      flex-shrink: 0;
      font-size: 14px;
      cursor: help;
      transition: all 0.2s ease;
      
      &:hover {
        color: #0284c7;
        transform: scale(1.1);
      }
    }
    
    span {
      font-size: 13px;
      color: #0c4a6e;
      line-height: 1.4;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
}

// 表达式示例
.expression-examples {
  margin-top: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: $radius;
  border: 1px solid #e9ecef;
  
  .examples-title {
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 6px;
    font-weight: 500;
  }
  
  .example-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-xs 6px;
    margin-bottom: 3px;
    background: white;
    border-radius: $radius-small;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: #e3f2fd;
      transform: translateX(2px);
    }
    
    &:last-child {
      margin-bottom: 0;
    }
    
    code {
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: 10px;
      color: #d63384;
      background: #f8f9fa;
      padding: 2px $spacing-xs;
      border-radius: $radius-small;
    }
    
    span {
      font-size: 10px;
      color: #6c757d;
    }
  }
}

// 条件配置相关样式
.expression-preview {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: $radius;
  
  .preview-title {
    font-size: 12px;
    color: #0c4a6e;
    margin-bottom: 6px;
    font-weight: 600;
  }
  
  .preview-content {
    code {
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: 13px;
      color: #0369a1;
      background: #fff;
      padding: 6px 10px;
      border-radius: $radius-small;
      border: 1px solid #0ea5e9;
      display: inline-block;
    }
  }
}

.condition-notice {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: $radius;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  
  .notice-icon {
    color: #0ea5e9;
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 14px;
  }
  
  .notice-text {
    font-size: 13px;
    color: #0c4a6e;
    line-height: 1.4;
  }
}
// 空状态
.empty-state {
  text-align: center;
  padding: 30px $spacing-lg;
  
  .empty-icon {
    font-size: 40px;
    color: #d9d9d9;
    margin-bottom: 10px;
  }
  
  .empty-text {
    font-size: 13px;
    color: #8c8c8c;
    margin-bottom: $spacing-md;
  }
  
  .empty-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
  }
}

// 选项内容样式
.option-content {
  display: flex;
  flex-direction: column;
  
  span {
    font-weight: 500;
  }
  
  small {
    color: #8c8c8c;
    font-size: 11px;
    margin-top: 2px;
  }
}

// 自动同意设置样式
.property-group {
  .label-icon {
    margin-right: 6px;
    color: #22c55e;
  }
  
  .auto-approve-options {
    background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%);
    border: 1px solid #bbf7d0;
    border-radius: $radius;
    
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
    
    .checkbox-item {
      display: flex;
      align-items: flex-start;
      padding: 0 $spacing-sm;
      
      :deep(.el-checkbox) {
        margin-right: 0;
        
        .el-checkbox__input {
          margin-right: $spacing-sm;
          
          .el-checkbox__inner {
            border-radius: $radius-small;
            width: 18px;
            height: 18px;
            border: 2px solid #d1d5db;
            transition: all 0.2s ease;
            
            &:hover {
              border-color: #22c55e;
            }
          }
          
          &.is-checked {
            .el-checkbox__inner {
              background-color: #22c55e;
              border-color: #22c55e;
            }
          }
        }
        
        .el-checkbox__label {
          padding-left: 0;
          font-size: 14px;
          line-height: 1.4;
        }
      }
      
      .checkbox-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        
        .checkbox-label {
          font-weight: 500;
          color: $text-color;
          margin-bottom: 2px;
          font-size: 14px;
          line-height: 1.3;
        }
      }
    }
  }
}

// ===========================================
// 会签设置容器样式
// ===========================================
.multi-instance-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: $radius;
  padding: $spacing-lg;
  margin: $spacing-lg 0;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, $primary-color 0%, #2563eb 100%);
  }
  
  .label-icon {
    margin-right: 6px;
    color: $primary-color;
  }
  
  .multi-instance-settings {
    margin-top: $spacing-lg;
    background: white;
    border-radius: $radius;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .preset-modes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 5px 5px;
      
      .preset-mode {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: $spacing-md;
        border: 2px solid #e5e7eb;
        border-radius: $radius;
        cursor: pointer;
        transition: all 0.2s ease;
        background: white;
        
        &:hover {
          border-color: $primary-color;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }
        
        &.active {
          border-color: $primary-color;
          background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
          
          .el-icon {
            color: $primary-color;
          }
          
          span {
            color: $primary-color;
            font-weight: 600;
          }
        }
        
        .el-icon {
          font-size: 20px;
          color: #6b7280;
          margin-bottom: 6px;
          transition: color 0.2s;
        }
        
        span {
          font-size: 13px;
          font-weight: 500;
          color: #374151;
          margin-bottom: 4px;
          text-align: center;
        }
        
        small {
          font-size: 11px;
          color: #6b7280;
          text-align: center;
          line-height: 1.3;
        }
      }
    }
    
    .basic-config,
    .advanced-config {
      padding: $spacing-lg;
      
      .config-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: $spacing-lg;
        padding-bottom: $spacing-md;
        border-bottom: 1px solid #f1f5f9;
        
        .config-title {
          font-size: 14px;
          font-weight: 600;
          color: $text-color;
          display: flex;
          align-items: center;
          gap: $spacing-sm;
          
          &::before {
            content: '';
            width: 4px;
            height: 16px;
            background: $primary-color;
            border-radius: 2px;
          }
        }
      }
    }
    
    .advanced-config {
      background: #fafbfb;
      border-top: 1px solid #f1f5f9;
      
      .config-header {
        .config-title {
          &::before {
            background: #9ca3af;
          }
        }
      }
    }
  }
}

// 独立的预设模式样式（为当前HTML结构准备）
.preset-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: $spacing-md;
  
  .preset-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: $spacing-md;
    border: 2px solid #e5e7eb;
    border-radius: $radius;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    
    &:hover {
      border-color: $primary-color;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }
    
    &.active {
      border-color: $primary-color;
      background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
      
      .el-icon {
        color: $primary-color;
      }
      
      span {
        color: $primary-color;
        font-weight: 600;
      }
    }
    
    .el-icon {
      font-size: 20px;
      color: #6b7280;
      margin-bottom: 6px;
      transition: color 0.2s;
    }
    
    span {
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      margin-bottom: 4px;
      text-align: center;
    }
    
    small {
      font-size: 11px;
      color: #6b7280;
      text-align: center;
      line-height: 1.3;
    }
  }
}

// 默认配置信息样式
.default-config-info {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: $radius;
  padding: $spacing-md;
  margin: $spacing-md 0;
  
  .el-icon {
    color: #0ea5e9;
    font-size: 14px;
  }
  
  span {
    font-size: 12px;
    color: #0c4a6e;
    line-height: 1.4;
    
    code {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: 11px;
      font-weight: 500;
    }
  }
}

// ===========================================
// Element Plus 组件样式覆盖
// ===========================================

// 输入框
:deep(.el-input) {
  .el-input__wrapper {
    border-radius: $radius;
    box-shadow: 0 0 0 1px $border-color inset;
    transition: all 0.2s ease;
    min-height: 32px;
    
    &:hover {
      box-shadow: 0 0 0 1px $primary-color inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px #dbeafe, 0 0 0 1px $primary-color inset;
    }
  }
  
  .input-help {
    color: $text-muted;
    cursor: help;
    transition: color 0.2s;
    
    &:hover {
      color: $primary-color;
    }
  }
}

// 选择框
:deep(.el-select) {
  .el-select__wrapper {
    border-radius: $radius;
    box-shadow: 0 0 0 1px $border-color inset;
    transition: all 0.2s ease;
    min-height: 32px;
    
    &:hover {
      box-shadow: 0 0 0 1px $primary-color inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px #dbeafe, 0 0 0 1px $primary-color inset;
    }
  }
}

// 文本域
:deep(.el-textarea) {
  .el-textarea__inner {
    border-radius: $radius;
    border: 1px solid $border-color;
    transition: all 0.2s ease;
    padding: $spacing-sm 10px;
    line-height: 1.4;
    
    &:hover {
      border-color: $primary-color;
    }
    
    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px #dbeafe;
    }
  }
}

// 复选框
:deep(.el-checkbox .el-checkbox__input) {
  .el-checkbox__inner {
    border-radius: $radius-small;
    width: 18px;
    height: 18px;
    border: 1px solid $border-color;
    transition: all 0.2s ease;
    
    &:hover {
      border-color: $primary-color;
    }
  }
  
  &.is-checked {
    .el-checkbox__inner {
      background-color: $primary-color;
      border-color: $primary-color;
    }
  }
}

// 单选按钮组
:deep(.el-radio-group) {
  display: flex;
  width: 100%;
  border-radius: $radius;
  overflow: hidden;
  border: 1px solid $border-color;
  
  .el-radio-button {
    flex: 1;
    
    .el-radio-button__inner {
      width: 100%;
      border: none;
      border-right: 1px solid $border-color;
      border-radius: 0;
      padding: $spacing-sm $spacing-md;
      font-size: 13px;
      font-weight: 500;
      background: #fff;
      color: $text-secondary;
      transition: all 0.2s ease;
      
      &:hover {
        background: #f9fafb;
        color: $primary-color;
      }
    }
    
    &:last-child .el-radio-button__inner {
      border-right: none;
    }
    
    &.is-active .el-radio-button__inner {
      background: $primary-color;
      color: #fff;
      box-shadow: inset 0 0 0 1px $primary-color;
    }
  }
}

// 按钮
:deep(.el-button) {
  border-radius: $radius;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 13px;
  padding: 6px $spacing-md;
}

:deep(.el-button.is-text:hover) {
  background: #eff6ff;
  color: $primary-color;
}

:deep(.el-button.el-button--primary) {
  background: $primary-color;
  border-color: $primary-color;
}

:deep(.el-button.el-button--primary:hover) {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
}

:deep(.el-button.el-button--danger.is-text:hover) {
  background: #fef2f2;
  color: #dc2626;
}

// 必填项样式
.required-field {
  color: #f56c6c;
  margin-left: 4px;
  font-weight: bold;
}

// ===========================================
// 响应式设计
// ===========================================
@media (max-width: 510px) {
  .property-panel {
    width: 100%;
  }
  
  .panel-header {
    padding: $spacing-md $spacing-lg;
  }
  
  .section-content {
    padding: $spacing-md $spacing-lg $spacing-lg;
  }
  
  .property-row {
    flex-direction: column;
    gap: $spacing-sm !important;
  }
}
</style>
